@message-prefix: ~'w-message';

.@{message-prefix} {
  padding: 10px 15px;
  position: relative;
  font-size: 14px;
  & + & {
    margin-top: 10px;
  }
  &-title,
  &-description {
    display: block;
  }
  &-rounded {
    border-radius: 5px;
  }
  &-description {
    color: rgba(0, 0, 0, 0.65);
  }
  &-title {
    color: rgba(0, 0, 0, 0.85);
  }
  &-title-description > .w-icon {
    font-size: 24px;
  }
  &-title-description &-title {
    font-size: 16px;
  }
  &-title-description &-title,
  &-title-description &-description {
    padding-left: 16px;
  }
  &-icon {
    padding-left: 34px;
  }
  &-success {
    background: lighten(#28a745, 40%);
    color: #28a745;
  }
  > button {
    position: absolute;
    right: 10px;
    top: 10px;
    &.w-btn {
      padding: 2px;
      min-width: 16px;
      min-height: 16px;
      color: rgba(0, 0, 0, 0.38);
      &:hover {
        background-color: rgba(255, 255, 255, 0.21) !important;
      }
      &:active {
        background-color: rgba(0, 0, 0, 0.1) !important;
      }
    }
  }
  &-warning {
    background: lighten(#ffc107, 40%);
    color: #ffc107;
  }
  &-info {
    background: lighten(#008ef0, 40%);
    color: #008ef0;
  }
  &-error {
    background: lighten(#dc3545, 40%);
    color: #dc3545;
  }
  > .w-icon {
    top: 14px;
    left: 14px;
    position: absolute;
  }
  &-enter {
    transform: scaleY(0.5);
    opacity: 0;
  }
  &-enter-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform 300ms ease, opacity 300ms ease;
  }
  &-exit {
    opacity: 1;
    transform: scaleY(1);
    transition: transform 300ms ease, opacity 300ms ease;
  }
  &-exit-active {
    transform: scaleY(0.5);
    opacity: 0;
  }
}
